<template>
	<view class="page" @touchmove.stop.prevent="moveHandle" @click="close">
		<view class="select">
			<image src="/static/img/close.png" class="closeBtn" @click.stop="close"></image>
			<view class="goods-info">
				<image :src="this.imgUrl"></image>
				<view class="goods-wrap" v-for="(item,index) in goodsPrice" :key="index">
					<text class="goods-name">{{item.b_name}}</text>

					<text class="goods-price">{{standard_sale_price}}</text>
				</view>
			</view>
			<view class="guige">
				<!-- 颜色 -->
				<view class="select-size" v-if="this.colorList.length !== 0">
					<text class="size-content">{{size[0].standard_base[1].name}}</text>
					<view class="size-list">
						<view :class="['size-list-item',currentIndex===index?'size-active':'']"  @click.stop="sizeStyle(index)" 
						 v-for="(item,index) in colorList" :key="index">
							<text>{{item}}</text>
						</view>
					</view>
				</view>
				<!-- 尺码 -->
				<view class="select-color" v-if="this.sizeList.length !== 0">
					<text class="color">{{size[0].standard_base[2].name}}</text>
					<view class="color-list">
						<view :class="['color-list-item',colorIndex===index?'size-active':'']"  v-for="(item,index) in sizeList" :key="index" @click.stop="colorStyle(index)" >
							<text>{{item}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<text class="buy-count">购买数量</text>
				<view class="change">
					<text @click.stop="reduce" :class="this.count === 1?'no-click':''">-</text>
					<text style="border-right: none; border-left: none;">{{count}}</text>
					<text @click.stop="add">+</text>
				</view>
				<view class="operation">
					<view class="add-cart" @click.stop="toCart">
						<text>加入购物车</text>
					</view>
				
					<view class="buy-now"   @click.stop="toWxLogin">
						<text>立即下单</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {},
		created() {
			this.standardPrice(this.goodsPrice[0]['sale_price']);
			// this.toWxLogin()
		},
		props: {
			size: {
				type: Array,
				default () {
					return []
				}
			},
			colorList: {
				type: Array,
				default () {
					return []
				}
			},
			sizeList: {
				type: Array,
				default () {
					return []
				}
			},
			standardValue: {
				type: Array,
				default () {
					return []
				}
			},
			goodsPrice: {
				type: Array,
				default () {
					return []
				}
			},
			b_id: {
				type: String,
				default () {
					return ''
				}
			},
			imgUrl: {
				type: String,
				default () {
					return ''
				}
			},
			bizpro_name: {
				type: String,
				default () {
					return ''
				}
			},
			type1: {
				type: Number,
				default () {
					return ''
				}
			},
			type2: {
				type: Number,
				default () {
					return ''
				}
			},
			bizpro_number: '',
			bizpro_lable: '',
			supplier_id: '',
			bizpro_spec_value: '',

		},
		data() {
			return {
				count: 1,
				currentIndex: 0,
				colorIndex: 0,
				flag: false,
				standard_sale_price: '',
				mark:'',
				showAuthority:false ,//微信是否授权状态 默认否
				appId:'wx91063cc93c2cffbf',
				
			}
		},
		created() {
			this.currentIndex = this.type1
			this.colorIndex = this.type2
			// #ifdef APP-PLUS|| MP-WEIXIN
			if(this.$parent.chooseGoods.price!=''){
				this.standard_sale_price='￥'+this.$parent.chooseGoods.price
			}else{
				this.standard_sale_price=this.$parent.price_area
			}
			this.count=this.$parent.count;
			// #endif
			// #ifndef APP-PLUS|| MP-WEIXIN
			if(this.$parent.$parent.chooseGoods.price!=''){
				this.standard_sale_price='￥'+this.$parent.$parent.chooseGoods.price
			}else{
				this.standard_sale_price=this.$parent.$parent.price_area
			}
			this.count=this.$parent.$parent.count;
			// #endif
		},
		methods: {
			//微信授权登录 跳转页面
			toWxLogin(){
				
				//获取下缓存的手机号 根据手机号 做判断
				let memberInfo = uni.getStorageSync('member')
				if(memberInfo==null||memberInfo==''||memberInfo.length==0){
					this.getCode();
					return
				}else{
					//判断授权之后  是否有手机号
					if(memberInfo.phone==null||memberInfo.phone==''||typeof(memberInfo.phone)=='undefined'||memberInfo.phone==0){
						uni.showToast({
						   title:'您尚未注册，正在前往注册！' ,	
						   icon:'none',
						   duration:1000
						})
						setTimeout(function(){
						
							//跳转到注册页
							uni.navigateTo({
								url: '/pages/register/Register'
							})
						},1000)
						return
					}else{
						this.toOrder();
					}
					
				}
				
				
			},
			/**
			 * 根据参数名 获取 URL 路径中的参数  
			 * @param {String} name 要读取的参数名称  
			 */  
			getUrlParam(){
				  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')  
				  let url = window.location.href.split('#')[0]   
				  let search = url.split('?')[1]  
				  if (search) {  
				    var r = search.substr(0).match(reg)  
				    if (r !== null) return unescape(r[2])  
				    return null  
				  } else {  
				    return null  
				  }  
			},
			//获取code
			getCode() {
				var code = this.getUrlParam('code') // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
				var local = this.$api.wxurl;  //这个地方是微信公众平台网页授权里面配置的域名，也是服务器的域名，把打包后的static和index放到webapps的文件夹下面。格式为域名+文件夹名称
				
				if (code == null || code === '') {
					window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.appId +
						'&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=#wechat_redirect'
						
				} else {
					/* 调用后台接口 获取token  是否登录过App的状态 */
					this.$api.getMemeberInfo({code:code}).then(res => {
										
					})
				
				}
			},
		
		
			add() {
				this.count++;
				// #ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.count=this.count;
				// #endif
				// #ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.count=this.count;
				// #endif
			},
			reduce() {
				if (parseInt(this.count) > 1 ) {
					this.count--;
					// #ifdef APP-PLUS|| MP-WEIXIN
					this.$parent.count=this.count;
					// #endif
					// #ifndef APP-PLUS|| MP-WEIXIN
					this.$parent.$parent.count=this.count;
					// #endif
				}
			},
			//默认传过来的价格 sale_price
			standardPrice(stand_sale_price) {
				this.standard_sale_price = stand_sale_price;

			},

			//点击规格参数  获取规格对应价格
			sizeStyle(index) {
				this.currentIndex = index;
				// #ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.typeId1 = index;
				this.$parent.chooseGoods.choosed = true
				this.$parent.chooseGoods.type1 = this.colorList[index]
				// #endif
				// #ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.typeId1 = index
				this.$parent.$parent.chooseGoods.choosed = true
				this.$parent.$parent.chooseGoods.type1 = this.colorList[index]
				// #endif
				console.log(this.sizeList)
				if(this.sizeList.length==0){
					this.getPrice()
				}else{
					if(this.colorIndex!=999){
						this.getPrice()
					}
				}
				
				
			},
			//点击规格参数  获取规格对应价格
			colorStyle(index) {
				this.colorIndex = index;
				// #ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.typeId2 = index;
				this.$parent.chooseGoods.choosed = true
				this.$parent.chooseGoods.type2 = this.sizeList[index]
				// #endif
				// #ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.typeId2 = index
				this.$parent.$parent.chooseGoods.choosed = true
				this.$parent.$parent.chooseGoods.type2 = this.sizeList[index]
				// #endif
				if(this.colorList.length==0){
					this.getPrice()
				}else{
					if(this.currentIndex!=999){
						this.getPrice()
					}
				}
				
			},
			getPrice(){
				this.$api.getStandardPrice({
					standard_value1: this.colorList[this.currentIndex],
					standard_value2: this.sizeList[this.colorIndex],
					bizpro_id: this.b_id,
				}).then(res => {
					this.standard_sale_price = '￥'+res.data.data.sale_price
					if(this.colorIndex==999){
						// #ifdef APP-PLUS|| MP-WEIXIN
						this.$parent.chooseGoods.price =res.data.data.sale_price;
						// #endif
						// #ifndef APP-PLUS|| MP-WEIXIN
						this.$parent.$parent.chooseGoods.price = res.data.data.sale_price
						// #endif
					}else{
						if(this.colorIndex!=999&&this.currentIndex!=999){
							// #ifdef APP-PLUS|| MP-WEIXIN
							this.$parent.chooseGoods.price = res.data.data.sale_price;
							// #endif
							// #ifndef APP-PLUS|| MP-WEIXIN
							this.$parent.$parent.chooseGoods.price = res.data.data.sale_price
							// #endif
						}
					}
					
				})
			},
			moveHandle() {
				return;
			},
			close() {
			// #ifdef APP-PLUS|| MP-WEIXIN
			this.$parent.closeGoodsSizePopup();
			// #endif
			// #ifndef APP-PLUS|| MP-WEIXIN
			this.$parent.$parent.closeGoodsSizePopup();
			// #endif
				
			},
			toAuthority(){
				// #ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.openAuthority();
				// #endif
				// #ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.openAuthority();
				// #endif
			}, 
			//立即下单 
			toOrder() {
				
				
				if(this.colorList.length!=0&&this.currentIndex==999){
					uni.showToast({
						title:'请选择规格',
						icon:'none',
						duration:1000
					})
					return
				}
				if(this.sizeList.length!=0&&this.colorIndex==999){
					uni.showToast({
					      title:'请选择规格',
					     icon:'none',
					     duration:1000
					     })
					return
				}
				var _index = this.colorIndex
				if(_index == 999){
					_index = 0
				}
				
				
				console.log(uni.getStorageSync('member'))
				let memberInfo = uni.getStorageSync('member')
				if(memberInfo==null||memberInfo==''||memberInfo.length==0){
					this.getCode()
					return
				}else{
					//判断授权之后  是否有手机号
					if(memberInfo.phone==null||memberInfo.phone==''||typeof(memberInfo.phone)=='undefined'||memberInfo.phone==0){
						uni.showToast({
						   title:'您尚未注册，正在前往注册！' ,	
						   icon:'none',
						   duration:1000
						})
						setTimeout(function(){
						
							//跳转到注册页
							uni.navigateTo({
								url: '/pages/register/Register'
							})
						},1000)
						return
					}
					
				}

				var _price = this.standard_sale_price.replace('￥','')
				let token=uni.getStorageSync('token')

				console.log(_price)
				this.$api.getCheckOrder({
					buy_num: this.count,
					price: _price,
					bizpro_imgurl: this.imgUrl,
					bizpro_name: this.bizpro_name,
					bizpro_number: this.bizpro_number,
					bizpro_lable: this.bizpro_lable,
					supplier_id: this.supplier_id,
					standard_value1: this.colorList[this.currentIndex],
					standard_value2: this.sizeList[0],
					bizpro_id: this.b_id,
					token:token,

				}).then(res => {
					uni.navigateTo({
						url: '/pages/order/OrderConfirm?order_id=' + res.data.orderId
					})
					console.log(res);
					
				})
				.catch(res => {
					console.log(res.errorCode);
					if(res.errorCode == 1015){
						this.getCode();
					}
				
					console.log(res);
				})
			},
			toCart() {
				this.paramsToCart();
			},
			paramsToCart() {

				//请选择规格
				if(this.colorList.length!=0&&this.currentIndex==999){
					uni.showToast({
						title:'请选择规格',
						icon:'none',
						duration:1000
					})
					return
				}
				if(this.sizeList.length!=0&&this.colorIndex==999){
					uni.showToast({
					      title:'请选择规格',
					     icon:'none',
					     duration:1000
					     })
					return
				}

				console.log(uni.getStorageSync('member'))
				let memberInfo = uni.getStorageSync('member')
				this.close()
				if(memberInfo==null||memberInfo==''||memberInfo.length==0){
					this.getCode()
					return
				}else{
					//判断授权之后  是否有手机号
					if(memberInfo.phone==null||memberInfo.phone==''||typeof(memberInfo.phone)=='undefined'){
						uni.showToast({
						   title:'您尚未注册，正在前往注册！' ,	
						   icon:'none',
						   duration:1000
						})
						setTimeout(function(){
						
							//跳转到注册页
							uni.navigateTo({
								url: '/pages/register/Register'
							})
						},1000)
						return
					}
					
				}
				
				
				
				if(this.colorIndex==999){
					this.$api.paramsToCart({
						bizpro_id: this.b_id,
						standard_value1: this.colorList[this.currentIndex],
						standard_value2: this.sizeList[0],
						buy_num: this.count,
						mark:'detail',
					}).then(res => {
						uni.showToast({
							title: '添加购物车成功'
						})
					})
					.catch(res => {
						console.log(res.errorCode);
						if(res.errorCode == 1015){
							this.getCode();
						}
					
					})
				}else{
					this.$api.paramsToCart({
						bizpro_id: this.b_id,
						standard_value1: this.colorList[this.currentIndex],
						standard_value2: this.sizeList[this.colorIndex],
						buy_num: this.count,
						mark:'detail',
					}).then(res => {
						uni.showToast({
							title: '添加购物车成功'
						})
					})
					.catch(res => {
						console.log(res.errorCode);
						if(res.errorCode == 1015){
							this.getCode();
						}
					
					})
				}
				
			}
		}
	}
</script>

<style scoped>
	.page {
		position: fixed;
		top: 0;
		z-index: 100;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
	}

	.select {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1000;
		width: 750rpx;
		background: #fff;
	}

	.closeBtn {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		width: 23rpx;
		height: 23rpx;
		padding: 30rpx;
	}

	.goods-info {
		display: flex;
		align-items: center;
		width: 750rpx;
		height: 260rpx;
		border-bottom: 1rpx solid #f1f1f1;
	}

	.goods-info image {
		width: 190rpx;
		height: 190rpx;
		margin-left: 40rpx;
		border-radius: 20rpx;
	}

	.goods-wrap {
		margin-left: 30rpx;
	}

	.goods-name {
		width: 318rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.goods-price {
		display: block;
		width: 400rpx;
		height: 23rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(254, 177, 71, 1);
		margin-top: 20rpx;
	}

	.size-style {
		background: rgba(255, 247, 227, 1);
		border: 1rpx solid rgba(254, 177, 71, 1);
	}
	.guige{
		width:100%;
		height:auto;
		display: table;
		float:left;
		overflow:auto;
	}
	.select-size {
		width: 750rpx;
		height: auto;
		overflow: auto;
		padding-bottom:8px;
		border-bottom: 1rpx solid #F1F1F1;
	}

	.size-content {
		display: block;
		height: 27rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
		margin-left: 39rpx;
		margin-top: 40rpx;
	}

	.size-list {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		width: 100%;
		height: auto;
		margin-top: 20rpx;
		float: left;
		
	}

	.size-list-item {
		/* display: flex;
		justify-content: center; */
		width: auto;
		display: table;
		height: 44rpx;
		background: #F0F0F0;
		border-radius: 6rpx;
		margin-left: 30rpx;
		/* float: left; */
		line-height: 44rpx;
		margin-top:20rpx;
		padding:0px 6px;
	}
	
	.size-list-item text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		padding: 4rpx;
	}
	
	.select-color {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		width: 750rpx;
		/* display: table; */
		height: auto;
		/* overflow: hidden; */
		border-bottom: 1rpx solid #ccc;
		padding-bottom:8px;
	}

	.color {
		display: block;
		margin-top: 40rpx;
		margin-left: 39rpx;
		height: 28rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
	}

	.color-list {
		/* display: flex; */
		justify-content: flex-start;
		width: 100%;
		height: auto;
		margin-top: 20rpx;
		float: left;
	}

	.color-list-item {
		display: flex;
		justify-content: center;
		align-items: center;
		width: auto;
		height: 44rpx;
		background: #F0F0F0;
		border-radius: 6rpx;
		margin-left: 30rpx;
		float: left;
		margin-top: 20rpx;
		padding:0px 6px;
	}

	.color-list-item text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}
	.size-active{
		color: #FEB147; 
		background: #FFF7E3;
		height: 40rpx;
		border: #FEB147 1rpx solid ;
	}
	.bottom {
		position: relative;
		width: 750rpx;
		height: 287rpx;
		overflow: auto;
		border-top: #F1F1F1 1rpx solid;
	}

	.buy-count {
		display: block;
		margin-left: 39rpx;
		margin-top: 50rpx;
		height: 28rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.change {
		display: flex;
		position: absolute;
		right: 52rpx;
		top: 40rpx;
		width: 216rpx;
		height: 58rpx;
		
	}

	.change text {
		display: block;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 72rpx;
		height: 58rpx;
		font-size: 50rpx;
		line-height: 48rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(204, 204, 204, 1);
	}
	.change text:nth-child(2) {
		font-size: 30rpx;
	}
	.change text:last-child {
		border-radius:0 10rpx 10rpx 0;
	}
	.no-click {
		color: #ccc;
		border-radius: 10rpx 0 0 10rpx;
	}

	.operation {
		display: flex;
		width: 708rpx;
		height: 70rpx;
		margin-top: 80rpx;
		margin-left: 21rpx;
	}

	.add-cart {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 350rpx;
		height: 66rpx;
		border: 2rpx solid rgba(254, 177, 71, 1);
		border-radius: 35rpx 0rpx 0rpx 35rpx;
	}

	.add-cart text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(254, 177, 71, 1);
	}

	.buy-now {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 354rpx;
		height: 70rpx;
		background: rgba(253, 149, 47, 1);
		border-radius: 0rpx 35rpx 35rpx 0rpx;
	}

	.buy-now text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 238, 238, 1);
	}
</style>
